<template>
    <!-- 外围最大的盒子 -->
    <div class="List">
      <!-- 图片区域 -->
      <div class="myimg" v-if="myimage != ''">
        <van-image
          id="myone"
          :src="'data:image/png;base64,' + myimage"
          :style="{
            width: width * num * 0.6 + 'px',
            height: height * num * 0.6 + 'px',
            marginLeft: loctionleft + 'px',
            marginTop: loctiontop + 'px',
          }"
        >
          <!-- 点击列表中的每一项显示的圆点 -->
          <!-- <span
            v-if="newList != ''"
            id="span"
            :style="{
              width: 25 * num + 'px',
              height: 25 * num + 'px',
              fontSize: 18 * num + 'px',
              top:
                height * num * 0.5 -
                ((newList.y / 10 - newy * 100 - 168) * num) / 10 +
                'px',
              left: ((newList.x / 10 - newx * 100 - 168) * num) / 10 + 'px',
            }"
            >{{ newList.id }}</span
          > -->
          <!-- 实时显示车辆位置 -->
          <img
            src="../../../assets/车辆.png"
            alt=""
            :style="{
                 transform: 'rotate(' + fused_angle  + 'deg)',
              top:
                (height - (y / 10.0 - newy * 100.0) / 5 - 1) * 0.6 * num + 'px',
              left: ((x / 10.0 - newx * 100) / 5 - 4) * 0.6 * num + 'px',
              width: 15*num + 'px',
              height: 30 *num+ 'px',
            }"
            id="vehicle"
          />
          <!-- -------------------------------------------------------------------展现出全部充电点 -->
          <!-- 禁用状态图片 -->
          <div class="mybycar">
            <template v-for="(item, index) in recordList">
              <img
                v-if="item.valuable_bits == 0"
                :key="index"
                id="bycar"
                src="../../../assets/飞书20220913-115140.png"
                alt=""
                :style="{
                  width: 20 * num + 'px',
                  height: 30 * num + 'px',
                  top:
                    (height - (item.y / 10.0 - newy * 100.0) / 5 - 1) *
                      0.6 *
                      num +
                    'px',
                  left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                  transform: 'rotate(' + item.fused_angle + 'deg)',
                }"
              />
            </template>
          </div>
          <!-- 启用状态图片 -->
          <div class="mybycar">
            <template v-for="(item, index) in recordList">
              <img
                v-if="item.valuable_bits == 1"
                :key="index"
                id="bycar"
                src="../../../assets/maiwei.zip.png"
                alt=""
                :style="{
                  width: 20 * num + 'px',
                  height: 30 * num + 'px',
                  top:
                    (height - (item.y / 10.0 - newy * 100.0) / 5 - 1) *
                      0.6 *
                      num +
                    'px',
                  left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                  transform: 'rotate(' + item.fused_angle + 'deg)',
                }"
              />
            </template>
          </div>
  
          <!--点击后显示这一项充电点 -->
          <div
            :class="{ active: newactive }"
            :style="{
              width: 25 * num + 'px',
              height: 30 * num + 'px',
              top:
                (height - (newList.y / 10.0 - newy * 100.0) / 5 - 1) * 0.6 * num +
                'px',
              left: ((newList.x / 10.0 - newx * 100) / 5 - 8) * 0.6 * num + 'px',
              transform: 'rotate(' + newList.fused_angle + 'deg)',
            }"
          >
            <img
              v-if="newList != ''"
              id="bycar"
              src="../../../assets/maiwei.zip.png"
              alt=""
              :style="{
                width: 20 * num + 'px',
                height: 30 * num + 'px',
                top:
                  (height - (newList.y / 10.0 - newy * 100.0) / 5 - 1) *
                    0.6 *
                    num +
                  'px',
                left: ((newList.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                transform: 'rotate(' + newList.fused_angle + 'deg)',
              }"
            />
          </div>
          <!-- 启用的充电点 -->
          <div class="mybycar" v-if="newList.valuable_bits == 1">
            <img
              id="bycar"
              src="../../../assets/maiwei.zip.png"
              alt=""
              :style="{
                width: 20 * num + 'px',
                height: 30 * num + 'px',
                top:
                  (height - (newList.y / 10.0 - newy * 100.0) / 5 - 1) *
                    0.6 *
                    num +
                  'px',
                left: ((newList.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                transform: 'rotate(' + fused_angle + 'deg)',
              }"
            />
          </div>
          <!-- 禁用的充电点 -->
          <div class="mybycar" v-if="newList.valuable_bits == 0">
            <img
              id="bycar"
              src="../../../assets/飞书20220913-115140.png"
              alt=""
              :style="{
                width: 20 * num + 'px',
                height: 30 * num + 'px',
                top:
                  (height - (newList.y / 10.0 - newy * 100.0) / 5 - 1) *
                    0.6 *
                    num +
                  'px',
                left: ((newList.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                transform: 'rotate(' + fused_angle + 'deg)',
              }"
            />
          </div>
        </van-image>
        <!-- 按钮区域 -->
        <van-button @click="right" class="right"
          ><van-icon name="arrow" size="44"
        /></van-button>
        <van-button @click="left" class="left"
          ><van-icon name="arrow-left" size="44"
        /></van-button>
        <van-button @click="top" class="top"
          ><van-icon name="arrow-up" size="44"
        /></van-button>
        <van-button @click="bottom" class="bottom"
          ><van-icon name="arrow-down" size="44"
        /></van-button>
        <!-- --------------------------------------------------------------按钮放大缩小区域 -->
        <div class="mybig">
          <van-button type="info" @click="big"
            ><i class="iconfont icon-sousuofangda" style="fontsize: 32px"></i
          ></van-button>
          <van-button type="info" @click="min"
            ><i class="iconfont icon-suoxiao" style="fontsize: 32px"></i
          ></van-button>
        </div>
        <!-- --------------------------------------------------------------按钮放大缩小区域 -->
      </div>
      <!-- 库位属性内容 -->
      <div class="property">
        <!-- 删除库位按钮 -->
        <div class="mybutton" v-if="newList != ''">
          <!-- <van-button @click="remove(newList.id)">删除</van-button> -->
          <van-button @click="enable">启用</van-button>
          <van-button @click="disabled">禁用</van-button>
        </div>
        <div class="zore">充电点属性</div>
        <div class="beiji">
          <div class="middle" v-if="newList != ''">
            <div class="one">
              <span>ID:</span
              ><span style="color: #fff; marginleft: 35px">
                {{ newList.id }}</span
              >
            </div>
            <div class="x">
              <!-- <span>x轴坐标:</span><span>{{ newList.x }}</span> -->
              <!-- x轴坐标区域 -->
              <!-- <van-field
                label-width="80"
                @focus="addX"
                v-model="newList.x"
                label="x轴:"
                placeholder="请输入x轴坐标"
                :value="newList.x"
              /> -->
              <span>X轴:</span>
              <keyboardss :inputValue="newList.x" @keyList="ListX"></keyboardss>
            </div>
            <div class="y">
              <!-- y轴区域 -->
              <!-- <van-field
                label-width="80"
                @focus="addY"
                v-model="newList.y"
                label="y轴:"
                placeholder="请输入y轴坐标"
                :value="newList.y"
              /> -->
              <!-- <span>y轴坐标:</span><span>{{ newList.y }}</span> -->
              <span>Y轴:</span>
              <keyboardss :inputValue="newList.y" @keyList="ListY"></keyboardss>
            </div>
            <div class="info">
              <span
                >状态:
                <span style="color: #fff; marginleft: 15px">{{
                  newList.valuable_bits == 1 ? "启用" : "禁用"
                }}</span></span
              >
            </div>
            <div class="sonbutton">
              <van-button @click="seve(newList.id)">保存</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Dialog } from "vant";
  //导入封装好的删除数据接口
  import { removeApi, updataApi } from "@/api/record";
  // 导入yaml格式进行获取到数据的转换
  import yaml from "js-yaml";
  export default {
    //接受父组件传过来的值
    props: ["newList", "recordList", "xshow", "yshow", "newactive"],
    data() {
      return {
        // newactive:true,
        oneimg: "../../../assets/充电车.png",
        twoimg: "../../../assets/充电车-1.png",
        one: 0, //禁用标识
        two: 1, //启用按钮标识
        loctiontop: 0, //右边偏移变量
        loctionleft: 0, //左边便宜变量
        num: 0.5,
        myimage: "", //定义一个变量用来保存base64格式的数据
        width: "", //图片宽度
        height: "", //图片高度
        x: "", //保存x轴坐标
        y: "", //保存y轴坐标
        newx: "",
        newy: "",
        fused_angle: "", //定义一个变量保存角度
      };
    },
    created() {
      this.gain(); //一打开页面就就调用此方法
    },
  
    // mounted() {
    //   var div = document.getElementById("myone");
    //   div.addEventListener("touchstart", function (e) {
    //     var x = e.targetTouches[0].pageX - e.currentTarget.offsetLeft + 240;
    //     var y = e.targetTouches[0].pageY - e.currentTarget.offsetTop + 40;
    //     document.addEventListener("touchmove", move);
    //     function move(e) {
    //       div.style.left = e.targetTouches[0].pageX - x + "px";
    //       div.style.top = e.targetTouches[0].pageY - y + "px";
    //     }
    //     document.addEventListener("touchend", function () {
    //       document.removeEventListener("touchmove", move);
    //     });
    //   });
    // },
  
    methods: {
      ListX(val) {
        this.newList.x = Number(val);
      },
  
      ListY(val) {
        this.newList.y = Number(val);
      },
  
      //保存事件
      async seve(id) {
        try {
          //发送请求进行修改
          let res = await updataApi({
            id: id,
            x: this.newList.x,
            y: this.newList.y,
            type: this.newList.type,
          });
          //提示用户保存成功
          this.$toast.success("保存成功");
          //进行页面刷新
          this.$parent.getGain();
        } catch {
          //提示用户保存失败
          this.$toast.fail("保存失败");
        }
      },
      //-------------------------+ 键盘事件区域
      // y轴输入框焦点事件
      addY() {
        //生成自定义事件修改父组件中的值
        this.$emit("newyShow", true, false);
        //生成自定义事件关闭x轴
        // this.$emit('newxShow',false)
      },
      // x轴输入框焦点事件
      addX() {
        //生成自定义事件修改父组件中的值
        this.$emit("newxShow", true, false);
        //生成自定义事件修改y键盘的显示和隐藏
        // this.$emit('newyShow',false)
      },
      //启用按钮
      async enable() {
        //发送请求修改启用按钮的值为1
        let res = await updataApi({
          id: this.newList.id,
          type: this.newList.type,
          valuable_bits: this.two,
          x: this.newList.x,
          y: this.newList.y,
        });
        //使用this.$set让数据变成响应式
        this.$set(this.newList, "valuable_bits", this.two);
        //提示用户改为启用
        this.$toast.success("启用成功");
      },
      //禁用按钮
      async disabled() {
        //发送请求修改启用按钮的值为0
        let res = await updataApi({
          id: this.newList.id,
          type: this.newList.type,
          valuable_bits: this.one,
          x: this.newList.x,
          y: this.newList.y,
        });
        //使用this.$set让数据变成响应式
        this.$set(this.newList, "valuable_bits", this.one);
        //提示用户禁用成功
        this.$toast.success("禁用成功");
        this.$emit("getGain");
      },
  
      //图片右边便宜
      right() {
        this.loctionleft += 30;
      },
      // 图片左边移动
      left() {
        this.loctionleft -= 30;
      },
      // 图片上边移动
      top() {
        this.loctiontop -= 30;
      },
      // 图片往下移动
      bottom() {
        this.loctiontop += 30;
      },
  
      //放大图片按钮
      big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
      // 刷新页面按钮
      restore() {
        //回到第0个页面
        this.$router.go(0);
      },
      //用来获取图片数据的方法
      gain() {
          let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取到本地服务器的地址
        //     let ws = new WebSocket("ws://192.168.20.101:10009"); //发送webSocket请求
        ws.onmessage = (e) => {
          //使用箭头函数改变this的指向
          //当服务器有消息，就会自动调用这个函数 //e.data有服务器返回的数据
          const res = yaml.load(e.data); //使用yaml格式进行转换
          if (res.uri == "/sirius/topics/slam_grid_map") {
            //判断res中的uri路劲是不是等于有图片的路径
            this.myimage = res.data; //如果等于就 把里面中有的data进行base格式进行拼接
            this.width = res.info.width; //保存图片的宽度
            this.height = res.info.height; //保存图片的高度
            this.newx = res.info.origin.position.x;
            this.newy = res.info.origin.position.y;
            console.log(this.newx, "圆点x轴", this.newy, "圆点y轴");
          } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
            this.x = res.fused_x; //给x轴坐标赋值
            this.y = res.fused_y; //给y轴坐标赋值
            this.fused_angle = res.fused_angle; //保存角度
            console.log(this.x, this.y, "位置坐标");
          }
        };
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .List {
    width: 100%;
    .myimg {
      position: relative;
      display: flex;
      border: 2px solid black;
      height: 400px;
      width: 955px !important;
      overflow: hidden;
      .right {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 40%;
        right: 38%;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      .left {
        position: absolute;
        top: 40%;
        left: -35px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
  
        border: none;
        z-index: 1000;
      }
      .top {
        position: absolute;
        top: -35px;
        right: 64%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
  
        z-index: 1000;
        border: none;
      }
      .bottom {
        position: absolute;
        bottom: -35px;
        right: 64%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        // z-index: 10;
        border: none;
      }
      .van-image {
        position: relative;
        #span {
          position: absolute;
          width: 25px;
          height: 25px;
          background-color: skyblue;
          line-height: 25px;
          font-size: 18px;
          text-align: center;
        }
        .van-button {
          width: 150px;
          height: 40px;
          border-radius: 10px;
          background-color: #ffc000;
          position: fixed;
          top: 15px;
          left: 25px;
          font-size: 18px;
        }
      }
    }
    .property {
      position: fixed;
      top: 100px;
      right: 0;
      height: 1000px;
      text-align: left;
      line-height: 45px;
      width: 200px;
      background-color: #12151a;
      .mybutton {
        text-align: center;
        .van-button {
          color: #fff;
          height: 40px;
          font-size: 18px;
          border-radius: 8px;
          width: 170px;
          background-color: #1a1c25;
          border: none !important;
          margin-top: 12px;
        }
      }
      .zore {
        line-height: 45px;
        height: 45px;
        color: white;
        margin-top: 50px;
        background-color: #212430;
        border-radius: 14px 14px 0 0;
        text-align: center;
      }
      .middle {
        font-size: 22px;
        text-indent: 1em;
        .one {
          text-indent: 1.2em;
        }
      }
      .sonbutton {
        margin-top: 40px;
        text-align: center;
        .van-button {
          color: #fff;
          border: 2px solid #1989fa;
          font-weight: 700;
          width: 100px;
          height: 43px;
          border-radius: 20px;
          background-color: #181a23;
        }
      }
    }
  }
  
  #myone {
    position: relative;
    #span {
      display: inline-block;
      background-color: #00d1d1;
      position: absolute;
    }
  }
  
  .beiji {
    color: #5f5f61;
    height: 100%;
    background-color: #181a23;
  }
  
  .mybig {
    position: fixed;
    bottom: 30px;
    right: 240px;
    .van-button {
      margin-left: 20px;
    }
  }
  #bycar {
    position: absolute;
  }
  .Gray {
    position: absolute;
    background-color: #feed9d;
    border: 2px solid #cfc598;
  }
  ::v-deep.van-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0px !important;
    overflow: hidden;
    color: #fff !important;
    font-size: 18px;
    line-height: 24px;
    background-color: #181a23 !important;
  }
  ::v-deep input {
    color: #fff !important;
  }
  .active {
    border: 2px solid #fac119;
    position: absolute;
    border-radius: 5px;
    background-color: #46eefb;
  }
  .info {
    text-indent: 1.2em;
  }
  .y {
    display: flex;
    span {
      font-size: 16px;
      text-indent: 1.5em;
    }
  }
  .x {
    display: flex;
    span {
      font-size: 16px;
      text-indent: 1.5em;
    }
  }
  #vehicle {
    position: absolute;
  }
  </style>
  